feat(partition): small multiples #1076

monfera · 2021-03-11T22:11:23Z

Summary

Small multiples for partition charts

Additive small multiples (first level of small multiples; index): multiple <Partition> specs under <Chart> WIP
Multiplicative small multiples (second level of small multiples; innerIndex): breakdown of a <Partition> spec along its first partitioning layer
Both layers can independently specify horizontal, vertical or Z pattern (grid) (additive layer: not exposed yet)
Eventually, 2D grid will be possible not just with Z pattern but also, allowing a category specification per dimension (additive) and allowing the breakdown along the second partitioning layer; not in scope for this PR
Uses getChartIdSelectors in place of previous repeated (state) => state.chartIds (earlier unrelated feedback by Nick)
Abstracts out some types, eg. PanelPlacement, RelativeMargins
Tightens containerBackgroundColor in getShapeViewModel (no longer optional)
BREAKING: redefines the inner/outer padding notation for small multiples from [outer, inner] to {outer, inner}

Warning, will likely do push -f while it's WIP

Checklist

Delete any items that are not applicable to this PR.

codecov-io · 2021-03-11T22:16:47Z

Codecov Report

Merging #1076 (cb12f05) into master (f08f4c9) will increase coverage by 0.20%.
The diff coverage is 60.41%.

@@            Coverage Diff             @@
##           master    #1076      +/-   ##
==========================================
+ Coverage   71.77%   71.98%   +0.20%     
==========================================
  Files         381      397      +16     
  Lines       11743    12229     +486     
  Branches     2512     2636     +124     
==========================================
+ Hits         8429     8803     +374     
- Misses       3299     3387      +88     
- Partials       15       39      +24

Flag	Coverage Δ
unittests	`71.55% <60.29%> (-0.23%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...types/partition_chart/layout/types/config_types.ts	`100.00% <ø> (ø)`
src/chart_types/partition_chart/specs/index.ts	`53.84% <ø> (ø)`
src/chart_types/xy_chart/utils/dimensions.ts	`91.66% <ø> (ø)`
src/common/geometry.ts	`81.25% <ø> (ø)`
src/common/predicate.ts	`36.00% <ø> (ø)`
src/specs/group_by.ts	`100.00% <ø> (ø)`
...types/partition_chart/renderer/dom/highlighter.tsx	`16.09% <4.34%> (-2.96%)`	⬇️
...n_chart/renderer/canvas/canvas_linear_renderers.ts	`8.19% <4.54%> (-1.24%)`	⬇️
...artition_chart/renderer/canvas/canvas_renderers.ts	`6.21% <14.28%> (+0.57%)`	⬆️
...on_chart/state/selectors/get_highlighted_shapes.ts	`63.63% <25.00%> (+5.30%)`	⬆️
... and 48 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f08f4c9...cb12f05. Read the comment docs.

…trude into margin

…ty chart due to all zero slices

markov00

There are two outstanding issues that I'm seeing here:

With a vertical layout and 0 outer vertical padding, the first title is cutoff.
The legend instead mix up colors, in the example the the Mineral/fuel has a blue color, but is represented with the red one

src/chart_types/partition_chart/state/selectors/drilldown_active.ts

src/chart_types/partition_chart/state/selectors/tree.ts

monfera · 2021-03-23T13:03:17Z

The vertical offsetting is improved to avoid cropping with a zero outer panel pad: cb12f05 and the Theme iteration (follow-up PR) will use the Theme font and padding specs

markov00

LGTM, merging on green.
Followup PR:

fix hierarchical legend

…tition-4 # Conflicts: # api/charts.api.md

# [26.0.0](v25.4.0...v26.0.0) (2021-03-23) ### Features * **partition:** small multiples ([#1076](#1076)) ([282082b](282082b)) ### BREAKING CHANGES * **partition:** clarifies the inner/outer padding notation `<SmallMultiples style={{horizontalPanelPadding, verticalPanelPadding}}` from `[outer, inner]` to `{outer, inner}`—they still have the same effect

nickofthyme · 2021-03-23T15:38:04Z

🎉 This PR is included in version 26.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

# [26.0.0](elastic/elastic-charts@v25.4.0...v26.0.0) (2021-03-23) ### Features * **partition:** small multiples ([opensearch-project#1076](elastic/elastic-charts#1076)) ([9b7f2f6](elastic/elastic-charts@9b7f2f6)) ### BREAKING CHANGES * **partition:** clarifies the inner/outer padding notation `<SmallMultiples style={{horizontalPanelPadding, verticalPanelPadding}}` from `[outer, inner]` to `{outer, inner}`—they still have the same effect

monfera added :partition Partition/PieChart/Donut/Sunburst/Treemap chart related :small multiples Small multiples/trellising related issues wip work in progress labels Mar 11, 2021

monfera force-pushed the small-multiples-partition-4 branch 2 times, most recently from b0b1240 to 6da2336 Compare March 21, 2021 15:12

monfera added 24 commits March 23, 2021 02:13

feat: small multiples

b16daa0

test: mock update which is temporary

09e6d5a

test: mock update due to first part of margin fix ie text doesn't pro…

dc5814e

…trude into margin

fix: legend function post rebase fix

bbbf7d8

chore: old comment removal

62369dd

fix: deactivate small multiples drilldown for now

835b58a

feat: read inner breakdown direction from the spec

11a9ea3

feat: aspect ratio dependent inner panel zigzag

f417693

test: story mock update

55d4b2a

fix: return nullShapeViewModel if there'd be nothing to return ie emp…

19881ad

…ty chart due to all zero slices

feat: fuller utilization of the space

473e50f

test: knobs for layout

f1c0d89

feat: panel title

7e8ce2b

feat: separation of trees at multiplicative inner splot

e1e0e30

feat: sort

20348ae

chore: api update

e240a93

test: mock update

5693807

test: changed mock for only sunburst

fbdfcfc

feat: render panel title above the disk

a296549

feat: use inner margin from the small multiples spec

542f06f

chore: api doc improvs

dcf1e1a

fix: restored default inner pad

8987c66

feat: using d3 scaleband padding conventions like xy

6522be3

feat: dedicate space for the panel title

883b840

chore: post rebase api gen

30e3241

monfera force-pushed the small-multiples-partition-4 branch from 8ff0f95 to 30e3241 Compare March 23, 2021 01:17

monfera marked this pull request as ready for review March 23, 2021 06:20

monfera requested a review from markov00 March 23, 2021 06:21

monfera added 2 commits March 23, 2021 08:20

refactor: new api convention for inner and outer padding

5c1bbc2

test: renamed test case

b28d849

markov00 reviewed Mar 23, 2021

View reviewed changes

src/chart_types/partition_chart/state/selectors/drilldown_active.ts Outdated Show resolved Hide resolved

src/chart_types/partition_chart/state/selectors/tree.ts Show resolved Hide resolved

monfera added 2 commits March 23, 2021 13:37

chore: remove redundant check ht Marco

5f2e3bb

fix: change the baseline for more robust vertical position ht Marco

cb12f05

markov00 removed the wip work in progress label Mar 23, 2021

markov00 self-requested a review March 23, 2021 13:54

markov00 approved these changes Mar 23, 2021

View reviewed changes

monfera added 2 commits March 23, 2021 15:32

Merge remote-tracking branch 'origin/master' into small-multiples-par…

051c48b

…tition-4 # Conflicts: # api/charts.api.md

chore: post-merge api update

04062ad

monfera merged commit 282082b into elastic:master Mar 23, 2021

nickofthyme added the released Issue released publicly label Mar 23, 2021

markov00 mentioned this pull request Mar 31, 2021

Small multiples for partitioning charts #930

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(partition): small multiples #1076

feat(partition): small multiples #1076

monfera commented Mar 11, 2021 •

edited

Loading

codecov-io commented Mar 11, 2021 •

edited

Loading

markov00 left a comment

monfera commented Mar 23, 2021

markov00 left a comment

nickofthyme commented Mar 23, 2021

feat(partition): small multiples #1076

feat(partition): small multiples #1076

Conversation

monfera commented Mar 11, 2021 • edited Loading

Summary

Checklist

codecov-io commented Mar 11, 2021 • edited Loading

Codecov Report

markov00 left a comment

Choose a reason for hiding this comment

monfera commented Mar 23, 2021

markov00 left a comment

Choose a reason for hiding this comment

nickofthyme commented Mar 23, 2021

monfera commented Mar 11, 2021 •

edited

Loading

codecov-io commented Mar 11, 2021 •

edited

Loading